<template>
  <div class="box">
    <div class="head">
      <navComp :title="$route.meta.title" :back="$route.meta.back"></navComp>
      <p>
        <van-search background="#ff6040" placeholder="请输入搜索关键词" />
      </p>
    </div>
    <van-tree-select
      height="100vh"
      :items="cates"
      :main-active-index.sync="active"
    >
      <template #content>
        <van-divider
          :style="{
            color: '#FF6040',
            borderColor: '#FF6040',
            padding: '0 16px',
          }"
        >
          {{ cates[active].text }}
        </van-divider>
        <van-grid :column-num="3" :icon-size="60">
          <van-grid-item
            v-for="item in cates[active].children"
            :icon="`http://localhost:3000${item.img}`"
            :text="item.catename"
            @click="goList(item.id)"
          />
        </van-grid>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      // cates: [],
       cates: [
                {
                    "id": 2,
                    "pid": 0,
                    "text": "手机通讯",
                    "img": "",
                    "status": 1,
                    "children": [
                        {
                            "id": 10,
                            "pid": 2,
                            "text": "诺基亚手机",
                            "img": "/uploads/category/fee7e580-6c2d-11ea-b86c-579aced212c2.png",
                            "status": 1
                        },
                        {
                            "id": 12,
                            "pid": 2,
                            "text": "手机配件",
                            "img": "/uploads/category/764b6740-9673-11ea-b348-a734901db180.jpg",
                            "status": 1
                        },
                        {
                            "id": 13,
                            "pid": 2,
                            "text": "小米手机",
                            "img": "/uploads/category/91238110-9673-11ea-b348-a734901db180.jpg",
                            "status": 1
                        },
                        {
                            "id": 14,
                            "pid": 2,
                            "text": "oppo手机",
                            "img": "/uploads/category/5f200c50-9674-11ea-b348-a734901db180.jpg",
                            "status": 1
                        },
                        {
                            "id": 24,
                            "pid": 2,
                            "text": "苹果macbok",
                            "img": "/uploads/category/0ebd5d00-12af-11eb-bcdf-7718b9d6829d.jpg",
                            "status": 1
                        },
                        {
                            "id": 25,
                            "pid": 2,
                            "text": "甜婶‘",
                            "img": "/uploads/category/cb22d1f0-ac63-11ed-a19e-0999552e1a6b.jpg",
                            "status": 1
                        }
                    ]
                },
                {
                    "id": 3,
                    "pid": 0,
                    "text": "电脑办公",
                    "img": "",
                    "status": 1,
                    "children": [
                        {
                            "id": 11,
                            "pid": 3,
                            "text": "笔记本",
                            "img": "/uploads/category/ddb0b9f0-6de0-11ea-a8e1-0d680bf54839.jpg",
                            "status": 1
                        },
                        {
                            "id": 15,
                            "pid": 3,
                            "text": "mac本",
                            "img": "/uploads/category/86b1e680-9674-11ea-b348-a734901db180.jpg",
                            "status": 1
                        },
                        {
                            "id": 16,
                            "pid": 3,
                            "text": "华为笔记本",
                            "img": "/uploads/category/a740dc80-9674-11ea-b348-a734901db180.jpg",
                            "status": 1
                        },
                        {
                            "id": 17,
                            "pid": 3,
                            "text": "戴尔笔记本",
                            "img": "/uploads/category/b63aeff0-9674-11ea-b348-a734901db180.jpg",
                            "status": 1
                        }
                    ]
                },
                {
                    "id": 4,
                    "pid": 0,
                    "text": "家居",
                    "img": "",
                    "status": 1
                },
                {
                    "id": 5,
                    "pid": 0,
                    "text": "服装",
                    "img": "",
                    "status": 1
                },
                {
                    "id": 7,
                    "pid": 1,
                    "text": "电视",
                    "img": "/uploads/category/fc3abc50-6c2c-11ea-b86c-579aced212c2.jpg",
                    "status": 1
                },
                {
                    "id": 8,
                    "pid": 1,
                    "text": "空调",
                    "img": "/uploads/category/354b31f0-6c2d-11ea-b86c-579aced212c2.jpg",
                    "status": 1
                },
                {
                    "id": 9,
                    "pid": 1,
                    "text": "洗衣机",
                    "img": "/uploads/category/436e9470-6c2d-11ea-b86c-579aced212c2.jpg",
                    "status": 1
                },
                {
                    "id": 18,
                    "pid": 0,
                    "text": "男鞋",
                    "img": "",
                    "status": 1
                },
                {
                    "id": 19,
                    "pid": 0,
                    "text": "女鞋",
                    "img": "",
                    "status": 1
                },
                {
                    "id": 20,
                    "pid": 0,
                    "text": "化妆品",
                    "img": "",
                    "status": 1
                },
                {
                    "id": 21,
                    "pid": 0,
                    "text": "运动户外",
                    "img": "",
                    "status": 1
                },
                {
                    "id": 22,
                    "pid": 0,
                    "text": "汽车",
                    "img": "/uploads/category/ab594a60-1288-11eb-bcdf-7718b9d6829d.jfif",
                    "status": 1
                },
                {
                    "id": 23,
                    "pid": 0,
                    "text": "苹果笔记本",
                    "img": "/uploads/category/a4272390-12ae-11eb-bcdf-7718b9d6829d.jpg",
                    "status": 1
                }
            ],
      active: 0,
      text:""
    };
  },
  created() {},
  mounted() {
    this.Retcatess();
  },
  methods: {
    Retcatess() {
      this.$api.Retcates().then((res) => {
        console.log(res);
        this.cates = res.data.list;
        this.cates.forEach((item) => {
          console.log(item);
          item.text=item.catename
        });
      });
    },
    goList(cateid){
      this.$router.push("/goodlits?type=2&cateid="+cateid)
    }
  },
};
</script>
<style scoped lang="scss">
.head {
  color: white;
  width: 100%;
  height: 50px;
  background-color: #ff6040;
  text-align: center;
  line-height: 50px;
  margin-top: 40px;
}
.box {
  width: 100%;
}
</style>
